<template>
    <div class="item" @dragstart="dragstart" @dragend="dragend" :draggable="true">
        {{ itemData.name || '暂无name' }}
        <i ref="delIcon" class="el-icon-error" @click="remove"></i>
    </div>
</template>

<script>
// import {ref} from 'vue';
export default {
    name: 'Item',
    props: {
        itemData: {
            type: Object,
            defalut: () => {
                return {};
            },
        },
        inTarget: {
            type: Boolean,
            defalut: false,
        },
        // dragClass: { // 集成到itemData中， 在传入前要把dragClass写入itemData.用于区分类型
        //     type: String,
        //     defalut: '',
        // },
    },
    // setup(props) {
    //     // console.log('item-props:', props);
    // },
    methods: {
        dragstart() {
            this.$store.state.dragItem = this.itemData;
            console.log('dragstart', this.$store.state.dragItem);
        },
        dragend() {
            this.$store.state.dragItem = {};
        },
        mouseover() {
            if (this.inTarget) {
                const dom = this.$refs.delIcon;
                dom.style.display = 'inline';
            }
        },
        mouseleave() {
            if (this.inTarget) {
                const dom = this.$refs.delIcon;
                dom.style.display = 'none';
            }
        },
        remove() {
            this.$emit('removeItem', this.itemData);
        },
    },
};
</script>

<style lang="scss" scoped>
.item {
    width: 100px;
    height: 20px;
    color: #409eff;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 0px;
    margin: 5px;
    cursor: move;
    // display: flex;
    line-height: 22px;
    text-align: center;
    align-items: center;
    position: relative;
    i {
        color: #f56c6c;
        position: absolute;
        right: 3px;
        top: 3px;
        display: none;
        cursor: pointer;
    }
}
</style>
